<!--新增文件-->
<template>
  <el-dialog v-loading.lock="loading" class="base-dialog" :custom-class="'panna-dialog_small'" :append-to-body="true"
    destroy-on-close :title="title" align="center" :close-on-click-modal="false" :visible.sync="dialogVisible">
    <p slot="title">{{ title }}</p>
    <el-form ref="formData" class :model="formData" label-width="100px">
      <BaseUploadFile key="BaseUploadAttachments" ref="BaseUploadAttachments" v-model="formData.attachments"
        :disabled="readonly" :file-size="51200" />
    </el-form>
    <span slot="footer" class="base-dialog-footer">
      <el-button v-if="!readonly" v-loading="submitLoad" type="primary" @click="onSubmit">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </span>

    <el-dialog v-if="hintDialogVisible" title="提示" :visible.sync="hintDialogVisible" class="base-dialog"
      :custom-class="'panna-dialog_small'" append-to-body>
      <el-row>
        <el-col>当前选择文件数量：{{ formData.attachments.length }}</el-col>
      </el-row>
      <el-row>
        <el-col>目录下有相同文件名称：</el-col>
      </el-row>
      <el-row>
        <el-col v-for="(item, index) in reduplicateFileList" :key="index" :span="8">
          {{
            item
          }}
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col>是否覆盖？</el-col>
      </el-row>
      <span slot="footer" class="base-dialog-footer">
        <el-button type="primary" @click="confirmSubmit">确 定</el-button>
        <el-button @click="hintDialogClose">取 消</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
import BaseUploadFile from "../../../components/BaseUploadFile/index.vue";
import { create, getReduplicateFilesByFiles } from "../../../api/Document/DocumentFile.js";

export default {
  name: "DocumentFileUpload",
  components: { BaseUploadFile },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    editId: {
      type: [String, Number],
      default: "",
    },
    dialogUploadFormVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      hintDialogVisible: false,
      title: "",
      loading: false,
      attachments: [],
      reduplicateFileList: [],
      fileList: [],
      folderId: 0,
      uploadLoad: false,
      dialogVisible: false,
      submitLoad: false,
      formData: {
        title: "",
        folderId: 0,
        filePath: [],
        FileName: [],
        attachments: [],
      },
    };
  },
  watch: {
    dialogVisible(val) {
      this.$emit("update:dialogUploadFormVisible", val);
    },
    dialogUploadFormVisible: {
      handler(val) {
        this.dialogVisible = val;
        if (val) {
          this.init();
        }
      }
    }
  },
  methods: {
    hintDialogClose() {
      this.$message({
        type: "info",
        message: "已取消",
      });
      this.hintDialogVisible = false;
    },
    // 初始化
    async init() {
      this.title = "上传文件";
      // 编辑 先获取信息
      if (this.editId) {
        this.formData.folderId = this.editId;
      }
    },
    // 提交表单
    onSubmit() {
      var _this = this;
      var tmpFormData = _this.Helper.simpleDeepCopy(_this.formData);
      tmpFormData.fileList = [];
      tmpFormData.fileNameList = [];
      if (tmpFormData.attachments != null && tmpFormData.attachments.length > 0) {
        tmpFormData.attachments.forEach(function(item, index) {
          var file = {
            originalFileName: item.name,
            storageFileName: item.newName,
            filePath: item.url
          };
          tmpFormData.fileList.push(file);
          tmpFormData.fileNameList.push(item.name);
        });
      }

      if (tmpFormData.fileList.length !== 0) {
        getReduplicateFilesByFiles({
          floderId: _this.formData.floderId,
          fileList: tmpFormData.fileNameList,
        }).then((res) => {
          if (res.data.fileList.length === 0 || res.data.fileList === null) {
            this.confirmSubmit();
          } else {
            this.reduplicateFileList = res.fileList;
            this.hintDialogVisible = true;
          }
        });
      }
    },
    //  确认提交
    confirmSubmit() {
      var _this = this;
      var tmpFormData = _this.Helper.simpleDeepCopy(_this.formData);
      tmpFormData.files = [];
      if (tmpFormData.attachments != null && tmpFormData.attachments.length > 0) {
        tmpFormData.attachments.forEach(function(item, index) {
          var file = {
            originalFileName: item.name,
            storageFileName: item.newName,
            filePath: item.url
          };
          tmpFormData.files.push(file);
        });
      }
      this.hintDialogVisible = false;
      var requestData = JSON.parse(JSON.stringify(tmpFormData));
      create(requestData).then(() => {
        this.successfulOperation();
      })
        .catch(() => {
          this.submitLoad = false;
        });
    },

    // 操作成功回调用
    successfulOperation() {
      this.submitLoad = false;
      this.$message.success("操作成功");
      this.$emit("success");
      this.closeDialog();
      this.fileList = [];
      this.attachments = [];
      this.fileNameList = [];
    },

    // 关闭弹框
    cancel() {
      this.dialogVisible = false;
    },
    closeDialog() {
      this.$parent.getList();
      this.cancel();
    },
  },
};
</script>

